import { Button, Dialog, Modal, Toast } from 'antd-mobile'
import React, { useCallback, useState } from 'react'
import style from './index.less'
import { history } from 'umi'
import { PhoneFill } from 'antd-mobile-icons'
import { useEffect } from 'react'
import { getUserPhone } from '@/services/Publish'
export type SupplyOrderDto = {
    id: number,
    supplierName: string,
    supplierPhone: string,
    negotiationState: string,
}
type Props = {
    data: SupplyOrderDto;
    callback: () => void;
};
export type userContactInfo = {
    contactName: string,
    contactPhone: string,

}

export default (props: Props) => {
    // const [detailData, setDetailData] = React.useState<dataDto>([]);
    const [visible, setVisible] = React.useState<boolean>(false);
    const [userInfo, setUserInfo] = useState<userContactInfo>({} as userContactInfo)
    const { data, callback } = props;
    const onCancel = useCallback(async () => {
        Dialog.confirm({
            title: '提示',
            content: '是否放弃交易',
            onConfirm: async () => {
                Toast.show({
                    icon: 'success',
                    content: '已放弃交易',
                })

            },
        })
    }, []);

    useEffect(() => {
        // setDetailData(data1)
    }, [])
    return (
        <div>
            <div className={style.btns}>
                <Button
                    className={style.btn}
                    size="small"
                    onClick={async () => {
                        const res = await getUserPhone(data.id);
                        setVisible(true);
                        setUserInfo(res)
                    }
                    }
                >
                    联系商家
                </Button>
                <Button
                    className={style.btn}
                    size="small"
                    onClick={onCancel}
                >
                    放弃交易
                </Button>
                <Button
                    className={style.btn}
                    color='success'
                    fill='outline'
                    size="small"
                    onClick={async () => {
                        history.push('/supply/order/transaction')
                    }}
                >
                    确认交易
                </Button>
            </div>
            <Modal
                showCloseButton={true}
                visible={visible}
                onClose={() => {
                    setVisible(false);
                }}
                title="联系方式"
                className={style.modal2}
                content={(
                    <div className={style['info-warp']}>
                        <div className={style.line2}>
                            <div className={style.info}>
                                <div className={style.tip}>以下是商家的联系方式，请电话联系</div>
                                <div className={style.phone}>
                                    <span>
                                        {userInfo.contactName ? `${userInfo.contactName} ` : ''}
                                        {userInfo.contactPhone}
                                    </span>
                                </div>
                            </div>
                            <div
                                className={style.icon}
                                onClick={() => {
                                    // window.location.href = `tel:${detailData.mobile}`;
                                }}
                            >
                                <div>
                                    <PhoneFill style={{ marginLeft: '5px' }} />
                                </div>
                                呼叫
                            </div>
                        </div>
                    </div>
                )}
            />

        </div>
    )
}
